<template>
	<view class="container">
		<view class="header">
			<text>选择房屋</text>
			<!-- <view class="button" @click="skip">跳过</view> -->
		</view>
		<view class="city-info">
			<view class="current selected-city">{{ params.projectName || '' }}-{{ params.buildName || '' }}-{{ params.unitName || '' }}</view>
		</view>
		<view class="search">
			<!-- 预留搜索-->
			<icon type="search" size="18" style=""></icon>
			<input v-model="searchText" placeholder="搜索社区房间号" class="search-input" />
		</view>
		<view class="body">
			<view class="list">
				<view v-if="item.show" v-for="(item, index) in list" :key="index" @click="toPage(item)" class="list-item">
					<view v-if="item.matchText" v-html="item.matchText"></view>
					<text v-else>{{ item.rn || '' }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import http, {customUrl} from '@/common/request.js';
import { mapState } from 'vuex';
import { getCommonShareInfo } from '@/common/utils.js';
export default {
	onShareAppMessage() {
		return getCommonShareInfo();
	},
	onLoad(option) {
		this.params = JSON.parse(decodeURIComponent(option.params || '{}'));
	},
	data() {
		return {
			searchText: '',
			params: {},
			list: []
		};
	},
	computed: {
		...mapState({ userInfo: state => state.userInfo, location: state => state.location, roomList: state => state.houseSetting.roomList })
	},
	watch: {
		searchText: {
			handler() {
				this.doFilter();
			}
		},
		'location.cityCode': {
			handler() {
				this.queryList();
			}
		}
	},
	mounted() {
		this.queryList();
	},
	methods: {
		queryList() {
			const list = [...this.roomList];
			for (let item of list) {
				item.show = true;
				item.matchText = '';
			}
			this.list = list;
		},
		doFilter() {
			const { list, searchText } = this;
			for (let item of list) {
				if (item.rn.includes(searchText)) {
					item.show = true;
					item.matchText = item.rn.replace(new RegExp(searchText, 'g'), `<span style="color: #F39800;">${searchText}</span>`)
				} else {
					item.show = false;
					item.matchText = '';
				}
			}
		},
		toPage({rn: roomName, ri: roomId, rt, ry}) {
			const {userInfo} = this;
			http(customUrl.rongchuang + '/member/xcx/member/house/houseList', {data: {userPhoneNum: userInfo.phonenumber}, method: 'GET'}).then(res => {
				if(res.success) {
					const list = res.data || [], roomIds = [];
					for (let item of list) {
						if(item.status !== 1 && item.status !== 3) {
							roomIds.push(item.roomId);
						}
					}
					if(roomIds.includes(roomId)) {
						//已认证
						this.skip()
					}else {
						//未认证
						uni.navigateTo({
							url: './author/index?params=' + encodeURIComponent(JSON.stringify({...this.params, roomName, roomId})),
							animationDuration: 200,
							animationType: 'pop-in'
						})
					}
				}
			})
		},
		skip(){
			uni.navigateBack({
				delta: 4,
				animationDuration: 200,
				animationType: 'pop-out'
			})
		}
	}
};
</script>

<style lang="less" scoped>
@import './house.less';
</style>
